<template>
  <div class="resource-list">
    <el-card class="box-card">
      <div slot="header">
        <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAdd">添加角色</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :data="roles"
          v-loading="isLoading"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="角色名称">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述">
          </el-table-column>
          <el-table-column
            prop="createdTime"
            label="添加时间">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150px">
            <template v-slot:default="scope">
              <div>
                <el-button type="text" @click="$router.push({
                  name: 'alloc-menu',
                  params: {
                    roleId: scope.row.id
                  }
                })">分配菜单</el-button>
                <el-button type="text" >分配资源</el-button>
              </div>
              <div>
                <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%">
          <create-or-edit
            :role="role"
            @success="handleSuccess"
            @cancel="handleCancel">
          </create-or-edit>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getRoles, deleteRole, getRoleById } from '@/services/role'
import CreateOrEdit from './CreateOrEdit'
export default {
  name: 'RoleList',
  components: {
    CreateOrEdit
  },
  data () {
    return {
      form: {
        name: ''
      },
      roles: [],
      isLoading: false,
      dialogVisible: false,
      isEdit: false,
      roleId: '',
      role: {}
    }
  },
  created () {
    this.loadRoles()
  },
  methods: {
    onReset () {
      this.$refs.form.resetFields()
    },
    onSubmit () {
      this.form.current = 1
      this.loadroles()
    },
    async loadRoles () {
      this.isLoading = true
      const { data } = await getRoles(this.form)
      if (data.code === '000000') {
        this.roles = data.data.records
        this.isLoading = false
      }
    },
    async loadRole () {
      const { data } = await getRoleById(this.roleId)
      if (data.code === '000000') {
        this.role = data.data
      }
    },
    handleAdd () {
      this.isEdit = false
      this.roleId = ''
      this.dialogVisible = true
      this.role = {
        name: '',
        code: '',
        description: ''
      }
    },
    handleEdit (role) {
      this.dialogVisible = true
      this.isEdit = true
      this.roleId = role.id
      this.loadRole()
    },
    handleDelete (role) {
      this.$confirm(`确认删除角色：${role.name}？`, '删除提示')
        .then(async () => {
          await deleteRole(role.id)
          this.$message.success('删除成功')
          this.loadRoles()
        })
        .catch(err => {
          if (err && err.response) {
            this.$message.error('删除失败，请重试')
          } else {
            this.$message.info('取消删除')
          }
        })
    },
    handleSuccess () {
      this.dialogVisible = false
      this.loadRoles()
    },
    handleCancel () {
      this.dialogVisible = false
    }
  }
}
</script>

<style>

</style>
